<template>
  <div>
    <ant-drawer :title="title" :visible="visible" v-if="visible" @onClose="onClose" :width="400">
      <template #content>
        <a-form :form="form">
          <a-form-item label="标题" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
            <ant-input-search
              :options="options"
              :Show="Show"
              :InputSearch="InputSearch"   
              @ChangeDown="ChangeDown"
            />
          </a-form-item>
          <a-form-item label="上级" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
            <a-input
              v-decorator="[
          'parentTitle',
          {
              initialValue:childTitle
          }
        ]"
              disabled
            />
          </a-form-item>
        </a-form>
      </template>
      <template #action>
        <a-button style="margin-right:8px" type="primary" @click="onClose">取消</a-button>
        <a-button type="primary" @click="Submit(options)">保存</a-button>
      </template>
    </ant-drawer>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
@Component({
  name: "sys-authority-openDrawer",
  layout: "menu"
})
export default class SysAuthorityDrawer extends Vue {
  @Prop({ type: String, required: true, default: "一级" }) childTitle!: string;
  @Prop({ type: Boolean, required: true, default: false }) visible!: boolean;
  @Prop({ type: String, required: true, default: "默认标题" }) title!: boolean;
  form: any = {};
  options: object = {
    zh: "",
    mn: "",
    en: ""
  };
  Show: boolean = false;
  InputSearch: string = "";
  created() {
    const _this: any = this;
    this.$nextTick(() => {
      this.form = _this.$form.createForm(this);
    });
  }
  handleSubmit(e) {
    e.preventDefault();
    this.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  }
  ChangeDown(val: object) {
    this.Show = !this.Show;
    this.InputSearch = JSON.stringify(val);
  }
  @Emit("onClose")
  onClose() {}
  @Emit("Submit")
  Submit(n: object) {}
}
</script>
